import {React,Fragment,useState,useRef} from 'react';
import moment from 'moment';
import {Table,Button,Input,Select,message} from 'antd';
import {SearchOutlined} from '@ant-design/icons';
import {inject,observer} from 'mobx-react';
import './css/CustomerInfo.css';
const {Option} = Select;

// 成功提示框
const success = (value) => {
  message.success(value);
};
// 失败提示
const error = (value) => {
  message.error(value);
};

//列名 
const mapFieldToChinese = {
  productCode:'商品编码',
  productName:'商品名称',
  quantity:'数量',
  tagPrice:'标签价',
  discount:'折扣',
  paidInAmount:'实收金额',
  integral:'积分',
  purchaseDate:'购买日期'
}
// 复选
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};


function CustomerConsumptionQuery(props) {

  const searchRef = useRef()
  const [searchMode,setSearchMode] = useState('0')//会员类型
  function searchModeChange(value) {
    setSearchMode(value)
  }
//   渲染table
    const [selectionType, setSelectionType] = useState('checkbox');
    const [columns,setColumns] = useState([]);
    const [data,setData] = useState([]);
    const [loading,setLoading] = useState(false)

    function searchInfo() {
      let values = {
          SearchContext:searchRef.current.state.value,
          searchMode:searchMode
      }
      setLoading(true);
      props.CustomerManagement.searchCustomerConsumptione(values).then((res)=>{
          if(res.data.length==0){
            success('没有查询到用户信息')
          }else{
            if(res.code==200){
                let keys = Object.keys(res.data[0]);
                let cols = keys.map((item,index)=>{
                  if(item == 'paidInAmount'){
                    return {
                      width: 150,
                      title: mapFieldToChinese[item],
                      dataIndex: item,
                      key: item,
                      align: 'center',
                      render: (val)=>{
                        return (
                          <span>￥{val}</span>
                        )
                      }
                    }   
                  }
                  else if(item == 'purchaseDate'){
                    return {
                      width: 150,
                      title: mapFieldToChinese[item],
                      dataIndex: item,
                      key: item,
                      align: 'center',
                      render: (val)=>{
                        return (
                          <span>{moment(val).format('YYYY-MM-DD')}</span>
                        )
                      }
                    }
                  }
                  else{
                    return {
                      width: 150,
                      title: mapFieldToChinese[item],
                      dataIndex: item,
                      key: item,
                      align: 'center'
                    }
                  }
                })
                setColumns(cols)
                setData(res.data)
                success(res.msg)
            }
          }
      }).catch((err)=>{
        console.log(err);
        error(err.msg)
      }).finally(()=> {setLoading(false);})
    }
    return (
        <Fragment>
            <Table 
            loading={loading}
            rowSelection={{
            type: selectionType,
                ...rowSelection,
            }} bordered='true' 
            title={() => {return (<Fragment>
              <h4>客户消费查询</h4>
              <div className='tableHeader'>
                <div>
                <Select defaultValue={searchMode} style={{ width: 170,marginRight: 20}} onChange={searchModeChange}>
                    <Option value="0">会员卡号</Option>
                    <Option value="1">会员手机号</Option>
                </Select>
                  <Input ref={searchRef} className='search' placeholder="请输入筛选内容" prefix={<SearchOutlined />}/>
                  <Button type='primary' onClick={searchInfo}>查询</Button>
                </div>
              </div>
              </Fragment>)}} 

            columns={columns} dataSource={data} rowKey={(r,i)=>{return i.toString()}} pagination={{ pageSize: 10 }} scroll={{ y: 400 }}></Table>
        </Fragment>
    );
}

export default inject('CustomerManagement')(observer(CustomerConsumptionQuery))
// export default CustomerConsumptionQuery;